<template>
  <div style="padding-top: 20px;" class="imgCol">
    <el-card style="width:500px">
      <el-steps :active="activeStep" align-center>
        <el-step title="重新设置密码"></el-step>
        <el-step title="前往邮箱确认"></el-step>
        <!-- <el-step title="重新设置密码"></el-step> -->
      </el-steps>
      <div class="imgCol" style="margin-top:40px">
        <div style="width:400px">
          <el-container>
            <el-aside width="65px">
              <i class="iconfont iconyouxiang" style="font-size:60px;color:#409EFF"></i>
            </el-aside>
            <el-main>
              <el-row>
                <span style="font-size:14px">邮件已发送至您的注册邮箱：{{email}}</span>
              </el-row>
              <el-row>
                <span class="plainWords" style="font-size:14px">请进入邮箱查看邮件，并激活新职通后台管理账号</span>
              </el-row>
            </el-main>
          </el-container>
          <el-container style="margin-top:40px">
            <el-aside width="65px"></el-aside>
            <el-main>
              <el-row>
                <span style="font-size:14px">没有收到邮件？</span>
              </el-row>
              <el-row>
                <span style="font-size:14px">
                  1.请检查邮箱地址是否填写正确，您可以返回
                  <el-link
                    :underline="false"
                    style="color:#409EFF;margin-left:10px"
                    icon="iconfont iconbianji"
                    @click="goBack"
                  >重新填写</el-link>
                </span>
              </el-row>
              <el-row>
                <span style="font-size:14px">2.请检查您的邮件垃圾箱</span>
              </el-row>
              <el-row>
                <span style="font-size:14px">
                  3.您也可以重新尝试
                  <el-link
                    :underline="false"
                    style="color:#409EFF;margin-left:10px"
                    @click="sendAgain"
                  >
                    <i class="el-icon-s-promotion"></i>重新发送
                  </el-link>
                </span>
              </el-row>
            </el-main>
          </el-container>
          <el-row style="margin-top:40px">
            <button class="btnActive pointer" @click="login">我已确认</button>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeStep: 2,
      email: "",
      code: ""
    };
  },
  watch: {},
  mounted() {
    this.email = this.$route.query.email;
    this.code = this.$route.query.code;
  },
  methods: {
    login() {
      var URL = this.IP + "/user/login";
      console.log(URL);
      this.$ajax({
        method: "post",
        url: URL,
        data: {
          username: this.email,
          password: this.code
        }
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.$message({
              message: "修改密码成功！",
              type: "success"
            });
            this.$router.push({
              path: "/home/recent"
            });
          } else {
            console.log(response.data.msg);
            this.$message.error(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    goBack() {
      this.$router.push({
        path: "/forgetStep1"
      });
    },
    sendAgain() {
      var URL = this.IP + "/user/email";
      console.log(URL);
      this.$ajax({
        method: "post",
        url: URL,
        params: {
          emailType: "RESETPASSWORD",
          targetType: "ORGAN"
        },
        data: {
          username: this.email,
          password: this.code
        }
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.$message({
              message: response.data.data,
              type: "success"
            });
          } else {
            console.log(response.data.msg);
            this.$message.error(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    }
  }
};
</script>
<style>
.el-main,
.el-header,
.el-footer,
.el-aside {
  padding: 0px;
}

.imgCol {
  display: flex;
  justify-content: center;
  align-items: center;
}
.plainWords {
  color: rgb(105, 110, 125);
}
.pointer {
  cursor: pointer;
}
.btnActive {
  width: 400px;
  height: 40px;
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  border-style: none;
  border-radius: 5px;
}
</style>